<!-- 注册 -->
<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <div class="registerinput">
      <ul>
        <li>
          <mt-field v-model="userlist.phone" label="手机号" placeholder="请输入手机号" type="tel"></mt-field>
        </li>
        <li class="yzm">
          <mt-field v-model="userlist.txyzm" label="图形验证"></mt-field>
          <div id="btn code1" @click="refreshCode">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
          <!--<a id="btn" type="button" :disabled="disabled" @click="getcode" v-html="yzmtext" :class="{'is-disabled': disabled}"></a>-->
        </li>
        <li class="yzm">
          <mt-field v-model="userlist.hycode" label="验证码"></mt-field>
          <div @click="getcode" id="btn">
            <mt-button type="primary" size="large"
                       :style="backgroundColor"
                       v-html="yzmtext" :disabled="disabled"></mt-button>
          </div>
          <!--<a id="btn" type="button" :disabled="disabled" @click="getcode" v-html="yzmtext" :class="{'is-disabled': disabled}"></a>-->
        </li>
        <!-- <li>
          <mt-field v-model="userlist.name" label="您的姓名" placeholder="请输入您的姓名" type="text">
          </mt-field>
        </li> -->
        <li class="mint-cell-wrapper ndxb">
          <div class="title">您的性别</div>
          <div class="mint-cell-value value">
            <mt-radio v-model="userlist.sex" :options="['男', '女']">
            </mt-radio>
          </div>
        </li>
      </ul>
      <div class="line20"></div>
      <ul>
        <li class="yhxy">
          注册成功即视为同意
          <router-link :to="'agreement'" target="_blank" :style="textColor"> 用户注册协议</router-link>
        </li>
        <li class="zcbtn">
          <mt-button type="primary" size="large" :style="backgroundColor" @click.native="registerfn">立即注册</mt-button>
        </li>
      </ul>

    </div>
    <!-- 弹出注册成功 -->
    <div class="zccg" v-show="cgts">
      <!-- 背景 -->
      <div class="zccgbg"></div>
      <div class="zccgbox">
        <img class="ph" :src="zccgimg">
        <!--<div class="zero" @click="gofn('/willsave/2c912ccd641c5c0501641c70ad4f0025')"></div>-->
        <div v-show="!ewmpage" class="btnbox">
          <div v-show="btn1name != ''" class="one tobtn" @click="gofn(btn1url)">{{btn1name}}</div>
          <div v-show="btn2name != ''" class="two tobtn" @click="gofn(btn2url)">{{btn2name}}</div>
          <div v-show="btn3name != ''" class="three tobtn" @click="gofn(btn3url)">{{btn3name}}</div>
        </div>
        <div v-show="ewmpage" class="ewmBtn" @click="lookEwm"></div>
      </div>
    </div>

    <div class="zcewm" v-show="ewmshow" @click="nolook">
      <img @click.stop="stopTap" :src="relewmimg"/>
    </div>

  </div>
</template>

<script>
  import api from "../../api/api.js";
  import {MessageBox, Toast} from "mint-ui";
  import SIdentify from './identify'

  export default {
    components: {SIdentify},
    data() {
      return {
        identifyCodes: "1234567890",
        identifyCode: "",
        yzmtext: "获取验证码",
        isBack: false,
        disabled: false,
        cgts: false,
        zccgimg: "",
        bdcgimg: '',
        zccgimg2: "",
        bdcgimg2: '',
        userlist: {
          txyzm: "",
          hycode: "",
          name: "",
          phone: "",
          sex: ""
        },
        ewmshow: false,
        btn1name: '',
        btn1url: '',
        btn2name: '',
        btn2url: '',
        btn3name: '',
        btn3url: '',
        relewmimg: '',
        ewmpage: false
      };
    },
    methods: {
      // 前端验证码start
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
        }
        console.log(this.identifyCode);
      },
      // 前端验证码
      stopTap() {
        console.log('stop');
      },
      // 关闭二维码
      nolook() {
        this.ewmshow = false;
      },
      // 打开二维码
      lookEwm() {
        console.log(1);
        this.ewmshow = true;
      },
      gofn(url) {
        if (url.indexOf('http') === -1) {
          this.$router.push(url);
        } else {
          location.href = url;
        }
      },
      getcode() {
        try {
          var that = this;
          if (this.userlist.phone == "") {
            Toast("请输入您的手机号");
          } else if (this.userlist.phone.length != 11) {
            Toast("请输入正确的手机号");
          } else if (this.userlist.txyzm == '') {
            Toast("请输入图形验证码");
          } else if (this.userlist.txyzm != this.identifyCode) {
            Toast("请输入正确的图形验证码");
          } else {
            // 获取验证码
            var phone = this.userlist.phone;
            api.sendActiveCode(this, phone, function (res) {
              let data = res.data;
              console.log(data);
              if (data.code == 0) {
                if (data.data == null) {
                  // 没数据新数据
                } else {
                  // 老数据
                  let olduserlist = data.data;
                }
                // refreshCode
                that.refreshCode()//切换图形验证码
                // that.userlist.txyzm = ''//清空图形验证码
                // 获取验证码倒计时
                var time;
                var djs = 60;
                var yzmtext;
                that.disabled = true;
                // this.yzmtext = djs + "秒后重发";

                time = setInterval(() => {
                  that.disabled = true;
                  if (djs > 0) {
                    djs--;
                    that.yzmtext = djs + "秒后重发";
                  } else {
                    clearInterval(time);
                    that.disabled = false;
                    that.yzmtext = "获取验证码";
                  }
                }, 1000);
                Toast({
                  message: "验证码已发送,请注意查收!",
                  duration: 2000
                });
              } else if (data.code == -2) {
                Toast({
                  message: data.msg,
                  duration: 2000
                });
                // setTimeout(function() {
                //   // 跳转到绑定
                //   that.$router.push({ path: "/bind" });
                // }, 2000);
              } else {
                Toast({
                  message: data.msg,
                  duration: 2000
                });
              }
            });

          }
        } catch (e) {
          alert(e);
        }

      },
      jrqbfn() {
        //跳转到钱包
        // this.$router.push({ path: "/wallet" });
      },
      // 提交注册
      registerfn() {
        var that = this;
        //地址栏获取员工参数
        let dg = this.$route.query.dg;
        let ygname = "";
        let ygcode = "";

        try {
          ygname = dg.split(",")[0];
        } catch (e) {

        }
        try {
          ygcode = dg.split(",")[1];
        } catch (e) {

        }

        that.ygname = ygname;
        that.ygcode = ygcode;


        //地址栏获取员工参数end

        if (this.userlist.phone == "") {
          this.Toastfn("请输入您的手机号", 2000);
        } else if (this.userlist.phone.length != 11) {
          this.Toastfn("请输入正确的手机号", 2000);
        } else if (this.userlist.hycode == "") {
          this.Toastfn("请输入验证码", 2000);
        } else if (this.userlist.sex == "") {
          this.Toastfn("请输入您的性别", 2000);
        } else if (this.userlist.sex == "") {
          this.Toastfn("请输入您的性别", 2000);
        } else {
          let sex;
          if (this.userlist.sex == "男") {
            sex = "M";
          } else {
            sex = "F";
          }
          let fromdata = {
            phone: this.userlist.phone,
            hycode: this.userlist.hycode,
            name: this.userlist.name || "",
            sex: sex,
            ygname: ygname, //员工name
            ygcode: ygcode //员工编号
          };
          console.log(fromdata);
          // 注册
          api.register(this, fromdata, function (res) {
            let data = res.data;
            console.log(data);
            if (data.code == 0) {
              let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
              // 判断是否是新用户
              if (data.data.XF_ISNEW == 1 && data.data.XF_ISONLINE == 1) {
                //存vipcode
                userinfo.vipcode = data.data.XF_VIPCODE;
                sessionStorage.setItem("userinfo", JSON.stringify(userinfo));
                // 新用户
                // 判断是否关注过
                api.getUserSubscribe(that, userinfo.openid, function (isres) {
                  console.log('是否关注过')
                  console.log(isres);
                  let isdata = isres.data;
                  if (isdata.code === 0) {
                    if (isdata.data === "1") {// 关注过
                      // 通过type值判断是否是别的地方跳转过来的
                      if (that.$route.query.type === undefined) {
                        that.cgts = true;
                        that.ewmpage = false;
                        api.getSysConfig(that, function (sysres) {
                          console.log('系统设置')
                          console.log(sysres);
                          let sysdata = sysres.data.data;
                          that.btn1name = sysdata.BUT1;
                          that.btn1url = sysdata.BUT1URL;
                          that.btn2name = sysdata.BUT2;
                          that.btn2url = sysdata.BUT2URL;
                          that.btn3name = sysdata.BUT3;
                          that.btn3url = sysdata.BUT3URL;
                          // 注册成功(出现按钮)
                          that.zccgimg = that.host.filehost + sysdata.CGYM[0].ID;
                          // 绑定成功(出现按钮)
                          that.bdcgimg = that.host.filehost + sysdata.BDCGYM[0].ID;
                        });
                      } else {
                        if (that.$route.query.type === "game") {
                          MessageBox({
                            title: '提示',
                            message: '恭喜您注册成功!',
                            showCancelButton: false,
                            confirmButtonText: "返回",
                            confirmButtonClass: "zcbtn"
                          }).then(action => {
                            location.href = that.isGameUrl;
                          });
                        } else {
                          MessageBox({
                            title: '提示',
                            message: '恭喜您注册成功!',
                            showCancelButton: false,
                            confirmButtonText: "返回",
                            confirmButtonClass: "zcbtn"
                          }).then(action => {
                            that.$router.go(-1);
                          });
                        }
                      }

                    } else {// 未关注过
                      // 通过type值判断是否是别的地方跳转过来的
                      if (that.$route.query.type === undefined) {
                        that.cgts = true;
                        that.ewmpage = true;
                        api.getSysConfig(that, function (sysres) {
                          console.log('系统设置')
                          console.log(sysres);
                          let sysdata = sysres.data.data;
                          // 二维码图片
                          that.relewmimg = that.host.filehost + sysdata.GZHRWM[0].ID;
                          // 注册成功(出现二维码)
                          that.zccgimg = that.host.filehost + sysdata.ZCGZTP[0].ID;
                          // 绑定成功(出现二维码)
                          that.bdcgimg = that.host.filehost + sysdata.BDCGGZ[0].ID;
                        });

                      } else {
                        if (that.$route.query.type === "game") {
                          MessageBox({
                            title: '提示',
                            message: '恭喜您注册成功!',
                            showCancelButton: false,
                            confirmButtonText: "返回",
                            confirmButtonClass: "zcbtn"
                          }).then(action => {
                            location.href = that.isGameUrl;
                          });
                        } else {
                          MessageBox({
                            title: '提示',
                            message: '恭喜您注册成功!',
                            showCancelButton: false,
                            confirmButtonText: "返回",
                            confirmButtonClass: "zcbtn"
                          }).then(action => {
                            that.$router.go(-1);
                          });
                        }
                      }

                    }
                  } else {
                    that.Toastfn(isdata.msg, 2000);
                  }
                });
              } else if (data.data.XF_ISNEW == 0 && data.data.XF_ISONLINE == 0) {
                let atype = that.$route.query.type;
                // 老会员未绑定
                MessageBox({
                  title: "提示",
                  message: "您已经是我们的会员，请立刻绑定您的会员卡",
                  showCancelButton: true,
                  showCancelButton: false,
                  confirmButtonText: "立即绑定",
                  closeOnClickModal: false,
                  confirmButtonClass: "zcbtn"
                }).then(action => {
                  // 跳转到绑定 that.ygname = ygname;  that.ygcode = ygcode;
                  that.$router.push({
                    path: "/bind",
                    query: {
                      vipcode: data.data.XF_VIPCODE,
                      ygname: that.ygname,
                      ygcode: that.ygcode,
                      type: atype
                    }
                  });
                });
              } else if (data.data.XF_ISNEW == 0 && data.data.XF_ISONLINE == 1) {
                //存vipcode
                userinfo.vipcode = data.data.XF_VIPCODE;
                sessionStorage.setItem("userinfo", JSON.stringify(userinfo));
                // 老会员已经绑定
                MessageBox({
                  title: "提示",
                  message: "您已经是会员",
                  showCancelButton: true,
                  showCancelButton: false,
                  confirmButtonText: "去逛逛",
                  closeOnClickModal: false,
                  confirmButtonClass: "zcbtn"
                }).then(action => {
                  // 跳转到绑定
                  that.$router.push({path: "/score"});
                });
              }
            } else {
              console.log(data.msg);
              that.Toastfn(data.msg, 2000);
            }
          });
        }
      },

      // 提示函数
      Toastfn(message, duration, position) {
        Toast({
          message: message,
          duration: duration,
          position: position
        });
      }
    },
    mounted() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    created() {
      let that = this;
      let query = this.$route.query;
      let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      console.log(query, "------==------");
      if (query.phone) {
        this.userlist.phone = query.phone;
      }

      console.log('type的值')
      console.log(this.$route.query.type);
      if (this.$route.query.type !== undefined) {
        this.isBack = true;
      }

      console.log(userinfo);
      if (userinfo != null && userinfo.vipcode != "") {
        MessageBox({
          title: "提示",
          message: "您已经是会员",
          showCancelButton: true,
          showCancelButton: false,
          confirmButtonText: "去逛逛",
          closeOnClickModal: false,
          confirmButtonClass: "zcbtn"
        }).then(action => {
          // 跳转到积分列表
          that.$router.push({path: "/score"});
        });
      } else {
      }

      // if (vipcode && openid) {
      //   this.Toastfn("您已注册过会员！", 2000);
      //   setTimeout(function() {
      //     //跳转到积分商城
      //     that.$router.push({ path: "/score" });
      //   }, 2000);
      // } else if (!vipcode && openid) {
      //   // 没有vipcode,在页面注册
      // } else if (!vipcode && !openid) {
      //   // 报错
      //   this.Toastfn("程序出错，请重新进入！", 2000);
      // }
      // console.log(geturlobj.openid);


    }
  };
</script>

<style scoped lang="less">
  ul,
  li {
    list-style: none;
  }

  #code1 {
    background-color: transparent;
    border-radius: 0;
    // text-align: left;
  }

  .registerinput {
    padding-top: 0.2rem;

    ul:first-child {
      padding-bottom: 0.2rem;
    }

    .yhxy {
      padding: 0.25rem;
      display: flex;
      align-items: center;
      font-size: 0.28rem;

      a {
        color: #F05DC4;
      }
    }

    .yzm {
      display: flex;
      align-items: center;

      a {
        width: 100%;
      }

      div {
        width: 182px;
        overflow: hidden;

        .mint-button--primary {
          margin-right: 10px;
          background-color: #00b050;
          color: #ffffff;
          font-size: 15px;
        }
      }
    }

    .zcbtn {
      padding: 0.2rem;
    }
  }

  // 新增区域css样式
  .perfectinput {
    > ul:first-child {
      padding-bottom: 0.2rem;
    }

    .yhxy {
      padding: 0.25rem;
      display: flex;
      align-items: center;
      font-size: 0.28rem;

      a {
        color: #F05DC4;
      }
    }

    .zcbtn {
      padding: 0.2rem;
    }
  }

  .hyts {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;

    .hynh {
      font-size: 0.4rem;
      color: #F05DC4;
      font-weight: bold;
      padding-bottom: 0.2rem;
    }

    .tswz {
      font-size: 0.24rem;
    }
  }

  // 提示
  .zccg {
    width: 100%;
    top: 0;

    .zccgbox {
      // padding-top: 0.7rem;
      position: fixed;
      z-index: 10;
      width: 80%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 8.2rem;
      /*height: 70%;*/
      background-color: #ffffff;
      // color: #ffffff;
      text-align: center;

      .btnbox {
        width: 100%;
        position: absolute;
        top: 5rem;
        z-index: 8;
      }

      .tobtn {
        width: 80%;
        height: 0.8rem;
        background: #ffffff;
        border-radius: 0.12rem;
        line-height: 0.8rem;
        text-align: center;
        color: #f05dc4;
        margin: 0.16rem auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .ewmBtn {
        position: absolute;
        left: 0;
        top: 4.4rem;
        width: 100%;
        height: 1.4rem;
        z-index: 9;
      }

      img.ph {
        width: 100%;
        height: 8.2rem;
      }

      .zero {
        position: absolute;
        left: 0;
        top: 5.1rem;
        height: 0.7rem;
      }

      .one {

      }

      .two {

      }

      .three {

      }
    }

    .zccgbg {
      background-color: #ffffff;
      position: fixed;
      opacity: 0.7;
      width: 100%;
      height: 100vh;
      top: 0;
      z-index: 9;
    }
  }

  #btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font-size: 18px;
    height: 41px;
    line-height: 41px;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 162px;
    margin-right: 10px;
    background-color: #00b050;
    color: #ffffff;
    font-size: 15px;

    &::after {
      background-color: #000;
      content: " ";
      opacity: 0;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      position: absolute;
    }
  }

  .is-disabled {
    opacity: .6;
  }

  .zcewm {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    img {
      width: 6rem;
      height: 7.5rem;
    }
  }
</style>
